<template>
    <div class="container-fluid" v-loading="loading">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-toolbar clearfix">
                            <el-form class="form-inline" onsubmit="return false;">
                                <!--<form class="form-inline" onsubmit="return false;">-->
                                <div class="form-group col-md-12">
                                    <label class="control-label" style="width: 114px;">回复任务标题</label>
                                    <input class="form-control" type="text" placeholder="回复任务标题" v-model="title">
                                </div>
                                <div class="form-group col-md-12">

                                    <el-form-item label="关键词(<=10)个" :label-width="formLabelWidth">
                                        <el-tag
                                                :key="tag"
                                                v-for="tag in tags"
                                                closable
                                                :disable-transitions="false"
                                                @close="handleClose(tag)">
                                            {{tag}}
                                        </el-tag>
                                        <el-input
                                                class="input-new-tag"
                                                v-if="inputVisible"
                                                v-model="inputValue"
                                                ref="saveTagInput"
                                                @keyup.enter.native="handleInputConfirm"
                                                @blur="handleInputConfirm"
                                                style="width: 80%;"
                                        >
                                        </el-input>
                                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+
                                            添加关键词
                                        </el-button>
                                    </el-form-item>

                                </div>
                                <div class="form-group col-md-12">
                                    <el-button type="primary" v-on:click="addMessage()">添加</el-button>
                                </div>
                            </el-form>
                        </div>

                        <div class="table-responsive">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="title"
                                        label="任务标题"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        label="关键词">
                                    <template slot-scope="scope">
                                        <el-tag v-for="tag in scope.row.tags" :key="tag">{{ tag }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="消息内容"
                                        width="80">
                                    <template slot-scope="scope">
                                        <a @click="openEdit(scope.row._id)" style="cursor:pointer;">设置</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="状态"
                                        width="80">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status">已启用</span>
                                        <span v-else>已停用</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="320"
                                >
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handlePush(scope.row._id)">发送预览</el-button>


                                        <el-button size="mini" type="success" @click="setStatus(scope.row._id,0)"
                                                   v-if="scope.row.status===1">禁用
                                        </el-button>
                                        <el-button size="mini" @click="setStatus(scope.row._id,1)"
                                                   v-if="!scope.row.status">启用
                                        </el-button>
                                        <el-button size="mini" @click="openDialogFormVisible(scope.row)">修改</el-button>
                                        <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除
                                        </el-button>
                                    </template>

                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <el-dialog title="任务设置" :visible.sync="dialogEditFormVisible" :close-on-click-modal="false">
                        <el-form :model="form" onsubmit="return false;">
                            <el-form-item label="任务标题" :label-width="formLabelWidth">
                                <input class="form-control" type="text" placeholder="任务标题" v-model="form.title">
                            </el-form-item>

                            <el-form-item label="关键词" :label-width="formLabelWidth">
                                <el-tag
                                        :key="tag"
                                        v-for="tag in form.tags"
                                        closable
                                        :disable-transitions="false"
                                        @close="handleEditClose(tag)">
                                    {{tag}}
                                </el-tag>
                                <el-input
                                        class="input-new-tag"
                                        v-if="inputEditVisible"
                                        v-model="inputEditValue"
                                        ref="saveEditTagInput"
                                        @keyup.enter.native="handleEditInputConfirm"
                                        @blur="handleEditInputConfirm"
                                        style="width: 40%;"
                                >
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showEditInput">+ 添加关键词
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogEditFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="updateMessage">确 定</el-button>
                        </div>
                    </el-dialog>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import common from '../../api/public.js';
    export default {
        name: "MessageKeywordComponent",
        data() {
            return {
                list: [],
                loading: false,
                formLabelWidth: "120px",
                tags: [],
                inputVisible: false,
                inputValue: '',
                inputEditValue: '',
                inputEditVisible: false,
                title: '',
                form: {
                    title: '',
                    tags: [],
                },
                old: {},
                dialogEditFormVisible: false,
                id: ''
            }
        },
        methods: {
            ...common,
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;

                if (inputValue && this.tags.indexOf(inputValue) == -1) {
                    this.tags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            handleClose(tag) {
                console.log(tag);
                this.tags.splice(this.tags.indexOf(tag), 1);
            },
            openDialogFormVisible(row) {
                this.dialogEditFormVisible = true;
                this.form.tags = row.tags;
                this.form.title = row.title;
                this.id = row._id;
                this.old = row;
            },

            showEditInput() {
                this.inputEditVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveEditTagInput.$refs.input.focus();
                });
            },
            handleEditInputConfirm() {
                let inputValue = this.inputEditValue;

                if (inputValue && this.form.tags.indexOf(inputValue) == -1) {
                    this.form.tags.push(inputValue);
                }
                this.inputEditVisible = false;
                this.inputEditValue = '';
            },
            handleEditClose(tag) {
                this.form.tags.splice(this.form.tags.indexOf(tag), 1);
            },
            updateMessage() {
                let self = this;
                if (!self.form.tags.length) {
                    self.$message.error("必须填写关键词");
                    return;
                }
                if (self.form.tags.length > 10) {
                    self.$message.error("关键词不能多于10个");
                    return;
                }
                let uri = "message/tag/" + self.id;
                self.loading = true;
                this.dialogEditFormVisible = false;

                axios.put(uri, self.form).then(function (result) {
                    if (result) {
                        self.getInfo();
                    } else {
                        self.$message.error("更新信息失败！");
                    }
                }).catch(function (error) {
                    self.loading = false;
                });

            },
            openEdit(id) {
                this.openUri('message/' + id + '/material-edit');
            },
            getInfo: function () {
                let self = this;
                let url = "message/post-keyword";
                let data = {};
                self.loading = true;
                axios.post(url, data).then(function (result) {
                    self.list = result.keywordList;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            addMessage() {
                let self = this;
                let uri = "message/store";

                if (!self.title) {
                    self.$message.error("必须填写回复任务标题");
                    return;
                }
                if (!self.tags.length) {
                    self.$message.error("必须填写关键词");
                    return;
                }
                if (self.tags.length > 10) {
                    self.$message.error("关键词不能多于10个");
                    return;
                }
                let data = {
                    title: self.title,
                    tags: self.tags,
                    messageType: 'keyword'
                };
                self.loading = true;
                axios.post(uri, data).then(function (result) {
                    self.loading = false;
                    if (result) {
                        self.title = '';
                        self.tags = [];
                        self.getInfo();
                    } else {
                        self.$message.error("创建信息失败！");
                    }
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            setStatus: function (id, status) {
                let self = this;
                let uri = "message/set-status/" + id + '/' + status;
                self.loading = true;
                axios.get(uri).then(function (result) {
                    self.getInfo();
                });
            },
            handleDelete: function (row) {
                let self = this;
                let tipStr = "此操作将永久删除" + row.title + ", 是否继续?";
                self.$confirm(tipStr, '关键词回复删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequire(row._id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteRequire: function (id) {
                let self = this;
                let uri = "message/" + id;
                axios.delete(uri).then(function () {
                    self.getInfo();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handlePush: function (id) {
                let self = this;

                this.$prompt('请输入手机号码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^1[3456789]\d{9}$/,
                    inputErrorMessage: '手机号码格式不正确'
                }).then(({value}) => {
                    let uri = "message/push/" + id + '/' + value;
                    axios.get(uri).then(function (result) {
                        console.log(result);
                    }).catch(function (error) {
                        self.loading = false;
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            }
        },
        mounted() {
            this.getInfo();
        }
    }
</script>

<style scoped>
    .form-inline .form-group {
        margin-bottom: 15px;
    }
</style>
